<template>
  <div class="L">
    <div class="List">
      <van-nav-bar title="积分记录" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
      <img src="../assets/bg2.png" alt />
      <span class="bq">{{sum}}</span>
      <span class="jf">当前积分</span>
    </div>

    <div class="content" id="content">
      <van-cell
        v-for="(item,key) in list"
        :key="key"
        class="zc"
        title="获得积分"
        :value="item.points"
        size="large"
        :label="item.createTime"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { pageNum: "1", pageSize: "10", list: [], sum: "0", way: "" };
  },
  mounted: function() {
    this.getData();
    this.getPsum();
    let winHeight = document.documentElement.clientHeight;
    document.getElementById("content").style.height = winHeight - 46 + "px";
  },
  methods: {
    onClickLeft() {
      this.$router.push("/Personal");
    },
    getData() {
      let paramForm = {
        id: this.pageNum,
        pageSize: this.pageSize
      };
      this.$axios.get("prod-api/app/point/list", paramForm).then(res => {
        if (200 == res.data.code) {
          this.list = res.data.rows;
          let list = res.data.rows;
          for (var i = 0; i < list.length; i++) {
            this.sum += list[i].points;
          }

          console.log(this.sum);
        } else {
        }
      });
    },
    getPsum() {
      this.$axios.get("prod-api/app/point/select").then(res => {
        if (200 == res.data.code) {
          this.sum = res.data.data;
        } else {
        }
      });
    }
  }
};
</script>

<style scoped>
.zc {
  padding-top: 50px;
  height: 110px;
}
.bq {
  position: absolute;
  color: #fff;
  font-size: 30px;
  top: 85px;
  left: 141px;
}
.jf {
  position: absolute;
  color: #fff;
  font-size: 10px;
  top: 125px;
  left: 164px;
}
.van-nav-bar {
  background-image: url("../assets/bg2.png");
}

.list {
  width: 92%;
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #eee;
  margin: 0 auto;
  font-size: 14px;
  box-sizing: border-box;
  text-align: center;
}
.item {
  width: 100%;
  margin-top: 20px;
  background: #fff;
}
.list-item {
  text-align: center;
}
.L {
  background-color: #f4f5f7;
  height: 800px;
}
</style>